﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="list-event.aspx.cs" Inherits="famails.BackEnd.page.list_event" MasterPageFile="~/Master.Master" %>

<%@ Register Assembly="CollectionPager" Namespace="SiteUtils" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div style="width:100%;padding:10px;">

    <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="border:1px solid #333;padding:0px;margin-bottom:10px;">
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="padding:10px 20px;background:#000;color:#fff;font-size:18px;font-weight:bold;position:relative;">   
            Tra cứu sự kiện
        </div>
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="height: auto;padding:10px;">
            <asp:Panel Visible="false" ID="pnError" runat="server">
                <div class="error-box round">
                    <asp:Label ID="lblError" runat="server" Text=""></asp:Label>
                </div>
            </asp:Panel>
            <asp:Panel Visible="false" ID="pnSuccess" runat="server">
                <div class="confirmation-box round">
                    <asp:Label ID="lblSuccess" runat="server" Text=""></asp:Label>
                </div>
            </asp:Panel>
        </div>
        <div class="col-md-6 col-xs-12 col-sm-12 col-lg-6" style="height: auto;padding:10px;">
                <fieldset>
                    <label for="simple-input" style="font-weight: bolder; text-transform: none">
                    Tiêu đề</label>
                    <asp:TextBox ID="txtSubject" CssClass="form-control" style="border:1px solid #333;border-radius:0px;" runat="server"></asp:TextBox>
                </fieldset>
        </div>
        <div class="col-md-6 col-xs-12 col-sm-12 col-lg-6" style="height: auto;padding:10px;">
                <fieldset>
                    <label for="simple-input" style="font-weight: bolder; text-transform: none">
                    Nhóm email</label>
                    <asp:DropDownList ID="drlMailGroup" CssClass="form-control" style="border:1px solid #333;border-radius:0px;" runat="server">
                    </asp:DropDownList>
                </fieldset>
        </div>
        <div class="col-md-4 col-xs-12 col-sm-6 col-lg-4" style="float:left;height: auto;padding:10px;">
                <fieldset>
                    <label for="simple-input" style="width:85px;float:left;padding:6px 20px 0px 0px;font-weight: bolder; text-transform: none">
                    Từ ngày</label>
                    <div id="txtFromDate"></div>
                </fieldset>
        </div>
        <div class="col-md-4 col-xs-12 col-sm-6 col-lg-4" style="float:left;height: auto;padding:10px;">
                <fieldset>
                    <label for="simple-input" style="width:85px;float:left;padding:6px 20px 0px 0px;font-weight: bolder; text-transform: none">
                    Đến ngày</label>
                    <div id="txtToDate"></div>
                </fieldset>
        </div>
        <div class="col-md-4 col-xs-12 col-sm-12 col-lg-4" style="height: auto;padding:10px;text-align:right;">
                <fieldset>
                            <div id="btnSearch" style="float:left;background:#333;color:#fff;text-align:center;padding:6px 15px;border-radius:0px;border:1px solid #fff;" class="btn col-md-6 col-lg-6 col-sm-6 col-xs-6">
                                <span style="margin-right:10px;" class="fa fa-desktop"></span> Lọc dữ liệu
                            </div>
                            <div id="btnExportExcel" style="float:left;background:#333;color:#fff;text-align:center;padding:6px 15px;border-radius:0px;border:1px solid #fff;" class="btn col-md-6 col-lg-6 col-sm-6 col-xs-6">
                                <span style="margin-right:10px;" class="fa fa-mail-forward"></span> Xuất dữ liệu
                            </div>
                </fieldset>
        </div>
        <style>
                    #contentjqxgrid {
                        width:100% !important;
                    }
                    #pagerjqxgrid {
                        width:100% !important;
                    }
                    /*
                    #columntablejqxgrid {
                    
                        width:100% !important;
                    }*/

        </style>
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" id="divList" style="height: auto;padding:0px;">
                <fieldset>
                <div id='jqxWidget' style="width:100% !important;font-size: 13px; font-family: Verdana; float: left;">
                    <div id="jqxgrid" style="width:100% !important">
                    </div>

                    <div id="popupWindow">
                        <div>
                            Xóa AutoResponder
                        </div>
                        <div style="overflow: hidden;">
                            <p>
                                Bạn có chắc là muốn xóa AutoResponder này không?
                            </p>
                            <button id="del">
                                Yes</button>
                            <button id="cancel">
                                No</button>
                        </div>
                    </div>
                </div>
                <!----------------->
                <script type="text/javascript">
                    jQuery(function ($) {
                        $("#txtFromDate").jqxDateTimeInput({ width: '150px', height: '25px' });
                        $("#txtToDate").jqxDateTimeInput({ width: '150px', height: '25px' });
                        $("#btnExportExcel").click(function () {
                            $("#jqxgrid").jqxGrid('exportdata', 'xls', 'registeremaillist');
                        });
                        var cellsrenderer = function (row, column, value) {
                            var id = $("#jqxgrid").jqxGrid('getcellvalue', row, "EventId");
                            //alert(name);
                            return '<a style="margin: 4px;color:#000;" target="_blank" href="event-report.aspx?Id=' + id + '">Xem kết quả</a>';
                        };
                        var editcellsrenderer = function (row, column, value) {
                            var id = $("#jqxgrid").jqxGrid('getcellvalue', row, "EventId");
                            //alert(name);
                            return '<a style="margin: 4px;color:#000;" href="create-event.aspx?eventId=' + id + '">Chỉnh sửa</a>';
                        };
                        $("#btnSearch").click(function () {
                            $("#jqxgrid").jqxGrid('showloadelement');
                            var postValue = "{subject:'" + $('#ContentPlaceHolder1_txtSubject').val() + "',groupid:" + $('#ContentPlaceHolder1_drlMailGroup').val() + ",from:'" + $('#txtFromDate').val() + "',to:'" + $('#txtToDate').val() + "'}";
                            $.ajax({
                                type: "POST",
                                url: "list-event.aspx/search",
                                data: postValue,
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (data) {
                                    var source =
                            {
                                datatype: "json",
                                datafields: [
                                    { name: 'EventId', type: 'int' },
                                    { name: 'GroupId', type: 'int' },
                                      { name: 'Subject', type: 'string' },
                                      { name: 'Sender', type: 'string' },
                                      { name: 'GroupName', type: 'string' },
                                      { name: 'StartDate', type: 'date' },
                                    { name: 'EndDate', type: 'date' }
                                ],
                                id: 'EventId',
                                localdata: data,
                                pager: function (pagenum, pagesize, oldpagenum) {
                                }
                            };
                                    var dataAdapter = new $.jqx.dataAdapter(source);
                                    $("#jqxgrid").jqxGrid(
                                    {
                                        width: $('#jqxWidget').width(),
                                        source: dataAdapter,
                                        selectionmode: 'multiplerowsextended',
                                        sortable: true,
                                        pageable: true,
                                        autoheight: true,
                                        columnsresize: true,
                                        columns: [
                                          { text: 'Tên autoresponder', datafield: 'Subject' },
                                          //{ text: 'Tên AutoResponder', width: 200, datafield: 'Subject' },
                                          { text: 'Nhóm email', datafield: 'GroupName' },
                                          { text: 'Email gửi', datafield: 'Sender' },
                                          { text: 'Thời gian bắt đầu', datafield: 'StartDate', width: 160, cellsalign: 'center', cellsformat: 'dd/MM/yyyy HH:mm:ss' },
                                          { text: 'Thời gian kết thúc', datafield: 'EndDate', width: 160, cellsalign: 'center', cellsformat: 'dd/MM/yyyy HH:mm:ss' },
                                          {  text: 'Kết quả',cellsrenderer: cellsrenderer,width: 120},
                                          { text: 'Chỉnh sửa', datafield: 'EventId', width: 100, cellsrenderer: editcellsrenderer },
                               {
                                   text: 'Xóa', datafield: 'Delete', columntype: 'button', cellsrenderer: function () {
                                       return "Xóa";
                                   }, buttonclick: function (row) {
                                       // open the popup window when the user clicks a button.
                                       id = $("#jqxgrid").jqxGrid('getrowid', row);
                                       var offset = $("#jqxgrid").offset();
                                       $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
                                       // show the popup window.
                                       $("#popupWindow").jqxWindow('show');
                                   }
                               }
                                        ]
                                    });

                                }
                            });
                        });
                        $("#popupWindow").jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 });
                        $("#del").jqxButton({ theme: theme });
                        $("#cancel").jqxButton({ theme: theme });
                        $("#del").click(function () {
                            $.ajax({
                                type: "POST",
                                url: "list-event.aspx/Delete",
                                data: "{id:" + id + "}",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (data) {
                                    $('#jqxgrid').jqxGrid('deleterow', id);
                                    $("#popupWindow").jqxWindow('hide');
                                }
                            });
                        });
                        $("#cancel").click(function () {
                            $("#popupWindow").jqxWindow('hide');
                        });
                        $('#btnSearch').trigger('click');
                    });

                </script>
                </fieldset>
        </div>
    </div>
</div>
    <!-- ============= datetime picker -->
    <script type="text/javascript">
        $(function () {
            $('#ContentPlaceHolder1_txtFromDate').datetimepicker({
                changeMonth: true, changeYear: true, timeFormat: "", dateFormat: "dd/mm/yy"
            });
            $('#ContentPlaceHolder1_txtToDate').datetimepicker({
                changeMonth: true, changeYear: true, timeFormat: "", dateFormat: "dd/mm/yy"
            });
        });
    </script>

</asp:Content>
